500. Server Side Rendering

Revision on SSG

• With static site generation
  • HTML is statically generated at build time, the built page is then cached and reused for each request.
    • For a dynamic page with getStaticPaths and fallback set to true the page is not generated at build time but is generated on the initial request.
    • With incremental static re-generation, a page an be re-generated for a request after the re-validation time has elapsed.
  • Problem with static site generation
    • We cannot fetch data at request time
      • With not being able to fetch data per request (always), we run into the problem of stale data
    • We don't get access to the incoming request
      • Problem when the data that needs to be fetched is specific to a user
      • ex: YouTube home page, every-time you reload it will display a unique personalized pages

SSR

• Nextjs allows you to pre-render a page not at build time but at request time
  • The HTML is generated on each request.
• slower and not-recommended by next.js
  • only use when it is absolutely necessary
• no HTML is generated when building the app, only js
  • HTML is generated on each request

getServeSideProps

• runs only on the server side
  • not included in js that is shipped to browser
• you can run server side codes here
• only allowed to be used inside pages, not components
• should return an object containing a props key which is an object
• run at request time

function Products({products}) {
    const productUI = (product) => {
        return (<>
            <h2>{product.title}</h2>
            <p>{product.description}</p>
        </>)
    }

    return (<>
        <h2>Your list of products are</h2>
        {
            products.map(productUI)
        }
    </>)
}

export default Products;

export async function getServerSideProps() {
    const response = await fetch("https://dummyjson.com/products");
    const data = await response.json();

    return {
        props: {
            products: data.products
        }
    }
}

SSR with Dynamic Parameters

function ProductByCategory({category, products}) {
    return (<>
        <h2> showing products for {category} </h2>
        {
            products.map(product => {
                return <div>
                    <h3>{product.title}</h3>
                    <p>{product.category}</p>
                    <p>{product.id}</p>
                    <hr/>
                </div>
            })
        }
    </>)
}

export default ProductByCategory;


export async function getServerSideProps(context) {
    const {params} = context;
    const {category} = params;
    const response = await fetch(`https://dummyjson.com/products/category/${category}`);
    const data = await response.json();

    return {
        props: {
            products: data.products,
            category: params.category,
        }
    }
}

getServerSideProps Context

export async function getServerSideProps(context) {
    const {params, req, res, query} = context;

    //can change cookie
    res.setHeader("Set-Cookie", ['name=Zekaryas'])
    
    //get all query {query: mapping}
    console.log(query);

	//get all params
	console.log(params)
}

• get-server-side-props
• The context parameter is an object containing the following keys:
  • params
    • if this page uses a dynamic route, params contains the route parameters. If the page name is [id.js] , then params will look like { id:…}.
  • req
    • The HTTP IncomingMessage object, with an additional cookies prop, which is an object with string keys mapping to string values of cookies.
  • res
    • The HTTP response object.
  • query
    • An object representing the query string, including dynamic route parameters.
  • …